<template>
  <view>
    <view class="sousuo">

      <picker
        mode="selector"
        :range="monthRange.map(item => item.text)"
        :value="selectedMonthIndex"
        @change="onMonthChange"
        class="picker-style"
      >
        <view class="picker-content">
          <text class="time-tag">请选择当前时间</text><text>{{ selectedMonth }}</text>
        </view>
      </picker>
	  <uni-section>
	    <view class="uni-padding-wrap">
	      <uni-segmented-control 
	        :current="currentStatus"
	        :values="statusItems"
	        @clickItem="onStatusClickItem"
	        :active-color="'#007aff'"
	  	  style-type="text"
	      />
	    </view>
	  </uni-section>
    </view>
   
    <view class="table-yg" v-for="item in people" :key="item.nickName">
         <uni-card>
           <view class="uni-card-body">
             <!-- 设置 son01 为 flex 布局，横向排列 -->
             <view class="son01">
               <text class="son-name">姓名：{{ item.nickName }}</text>
		
			   
               <!-- 使用 uni-tag 作为状态标签 -->
			   <uni-tag 
                 :text="item.status === 0 || item.status === null ? '未评' : '已评'"
                 :size="'normal'"
                 :type="item.status === 0 || item.status === null ? 'default' : 'success'"
                 :disabled="false"
                 :inverted="false"
               />
             <button @click="ratePerson(item)" class="btn" v-if="currentStatus === 0">评分</button>
             </view>
			 <text class="son-dept">部门：{{ item.deptName }}</text>
			 <text class="son-post">岗位：{{ item.postName }}</text>
           </view>
         </uni-card>
       </view>
  </view>

</template>

<script setup>
import { ref, onMounted } from "vue";
import { findpeople } from '@/api/shouye.js';
import { UserDetails } from "@/store/UserDetails.js";
import { onLoad, onShow } from "@dcloudio/uni-app";

const userData = UserDetails();

const isEmployee = ref("");
const datadx = ref({
  "roleId": '',
  "assessDate": '',
  "userId": '',
  "status": ''
});

// 初始化数据
const loading = ref(false);
const searchName = ref("");
const currentStatus = ref(0); // 默认选中状态为 "未评"
const selectedMonth = ref("");
const selectedMonthIndex = ref(12);
const people = ref([]);

// 月份范围
const monthRange = ref([]);
const statusItems = ref(['未评', '已评']); // 状态项数组

// 生成月份范围
const generateMonthRange = () => {
  const currentDate = new Date();
  const currentYear = currentDate.getFullYear();
  const currentMonth = currentDate.getMonth() + 1;

  const months = [];

  for (let i = -12; i <= 0; i++) { // 只生成过去6个月和当前月
    let year = currentYear;
    let month = currentMonth + i;

    if (month > 12) {
      month -= 12;
      year += 1;
    } else if (month <= 0) {
      month += 12;
      year -= 1;
    }

    months.push({
      value: `${year}-${month.toString().padStart(2, '0')}`,
      text: `${year}-${month.toString().padStart(2, '0')}`
    });
  }

  monthRange.value = months;
  selectedMonth.value = months[12].value;
};

// 更新月份时触发
const onMonthChange = (e) => {
  const selectedMonthText = monthRange.value[e.detail.value].value;
  selectedMonth.value = selectedMonthText;
  datadx.value.assessDate = selectedMonthText;  // 更新到 datadx 中
  fetchData();
};

// 更新状态时触发
const onStatusClickItem = (e) => {
  currentStatus.value = e.currentIndex;
  datadx.value.status = currentStatus.value;  // 更新状态
  fetchData();  // 重新请求数据
};
//评分按钮点击事件
const ratePerson = (item) => {
console.log(datadx.value.roleId);
//判断给那些用户评分
if(datadx.value.roleId===100){
	uni.navigateTo({
	  url: `/pages/check/assessjc/assessjc?userId=${item.userId}&assessDate=${datadx.value.assessDate}`
	});
}else{
	uni.navigateTo({
	  url: `/pages/check/assess/assess?userId=${item.userId}&assessDate=${datadx.value.assessDate}`
	});
}

};
// 初始化网页，请求数据
const fetchData = async () => {
  loading.value = true;
  if (isEmployee.value == 1) {
    datadx.value.roleId = 100;
  } else {
    datadx.value.roleId = userData.UserText.roleIds[0];
  }

  datadx.value.userId = userData.UserText.data.userId;
  datadx.value.assessDate = selectedMonth.value;
  datadx.value.status = currentStatus.value;
  
  try {
    // 调用 findpeople 函数并传入 datadx.value
    const res = await findpeople(datadx.value);
    console.log(res);
    people.value = res.rows;
  } catch (error) {
    console.error("请求数据失败", error);
  } finally {
    loading.value = false;
  }
};

// 在页面加载时生成月份范围
onMounted(() => {
	
  generateMonthRange();
  fetchData();  // 调用接口获取数据
});

onLoad((option) => {
  isEmployee.value = (option.isEmployee);
  console.log(isEmployee.value);
});
</script>



<style scoped>
/* 让 son01 容器成为 flex 布局，横向排列 */
.son01 {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 子项之间留有间隙 */
  gap: 10rpx; /* 子项之间的间隙 */
}
/* 控制文本、标签和按钮的大小间距 */
.son-name {
  font-size: 25px;
  color: #333;
}
/* 控制文本、标签和按钮的大小间距 */
.son-dept {
  font-size: 20px;
  color: #333;
}
/* 控制文本、标签和按钮的大小间距 */
.son-post {
  font-size: 20px;
  color: #333;
  margin-left: 50rpx;
}

.btn{
	margin-right: 10rpx;
}

/* picker样式 */
.picker-style {
  width: 100%; /* 保证picker宽度自适应 */
  padding: 12rpx; /* 上下左右的内边距 */
  background-color: #fff; /* 背景颜色为白色 */
  border-radius: 5rpx; /* 圆角 */
  border: 1rpx solid #ccc; /* 边框颜色 */
  margin-top: 10rpx; /* 上边距，确保和其他元素的间距 */
}

.picker-content {
  display: flex;
  justify-content: space-around; /* 元素左右分布，且元素两边有相等间距 */
  align-items: center;
  flex-direction: row;
  height: 50rpx;
}

/* picker文本样式 */
.picker-text {
  font-size: 16rpx; /* 设置文本字体大小 */
  color: #333; /* 设置文本颜色 */
  text-align: center; /* 文本居中 */
  line-height: 50rpx; /* 垂直居中对齐文本 */
}
/* 为整个 uni-section 容器添加背景色和适当的内外边距 */
.uni-section {
  background-color: #f9f9f9; /* 背景色，避免过于单调 */
  padding: 20rpx 0; /* 顶部和底部的内边距，给上下元素留出间隙 */
  margin-bottom: 20rpx; /* 和下方元素之间的间距 */
  border-radius: 10rpx; /* 圆角效果 */
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.05); /* 柔和的阴影效果 */
  margin-top: -60rpx;
}

/* 针对 uni-segmented-control 添加样式 */
.uni-segmented-control {
  display: flex; /* 设置为 flex 布局 */
  justify-content: space-between; /* 让每个 item 平均分配空间 */
  align-items: center; /* 垂直居中对齐 */
  padding: 8rpx 15rpx; /* 控制组件内部的内边距 */
  background-color: #fff; /* 白色背景 */
  border-radius: 25rpx; /* 圆角效果 */
  border: 1rpx solid #ddd; /* 浅灰色边框 */
}

/* 样式优化单个按钮（段控制项） */
.uni-segmented-control-item {
  font-size: 14rpx; /* 设置字体大小 */
  color: #333; /* 默认字体颜色 */
  padding: 8rpx 12rpx; /* 按钮的内边距 */
  border-radius: 20rpx; /* 圆角 */
  transition: background-color 0.3s ease; /* 添加平滑的过渡效果 */
}

/* 鼠标悬停效果 */
.uni-segmented-control-item:hover {
  background-color: #f0f0f0; /* 鼠标悬停时背景变亮 */
}

/* 激活状态的按钮 */
.uni-segmented-control-item--active {
  background-color: #007aff; /* 激活状态时背景颜色 */
  color: #fff; /* 激活时字体颜色变为白色 */
}

/* active color 样式 */
.uni-segmented-control-item--active:focus {
  outline: none; /* 移除点击时的焦点框 */
}
</style>
